<template>
    <div class="detext">
      <p class="detext_tip">朋友购买后,<strong>你可以赚{{yinli}}元作为奖励</strong> </p>
      <div class="detext_pic">
        <img :src="haibao" alt=""  mode="widthFix">
      <p>长按上面图片保存,分享给朋友</p>
      </div>
      <ul class="detext_btns">
        <li @click="changeelement">换一张</li>
<!--        <li @click="changestyle">换风格</li>-->
      </ul>

<!--      <van-popup v-model="show">-->
<!--        <div class="detext_dig">-->
<!--          <p class="detext_dig_title">邀请方式</p>-->
<!--          <span class="detext_dig_way">-->
<!--            <p class="detext_dig_way_labe">方式一:</p>-->
<!--            <span>-->
<!--              <p>微信内直接分享</p>-->
<!--              <p>点击微信右上角,通过[发送给朋友] [分享到朋友圈] 推广</p>-->
<!--            </span>-->
<!--          </span>-->
<!--          <span class="detext_dig_way">-->
<!--            <p class="detext_dig_way_labe">方式二:</p>-->
<!--            <span>-->
<!--              <p>复制以下链接,转发推广:<span class="copylink" v-clipboard:copy="sysAppIds"-->
<!--                                   v-clipboard:success="onCopy"-->
<!--                                   v-clipboard:error="onError">复制链接</span> </p>-->
<!--              <p class="linkbecopy">点击微信右上角,通过[发送给朋友] [分享到朋友圈] 推广</p>-->
<!--            </span>-->
<!--          </span>-->
<!--          <div class="detext_dig_tip"s>-->
<!--            <span >推广中心</span>-->
<!--            <p >在店铺 [我的] - [推广中心] 查看</p>-->
<!--          </div>-->
<!--        </div>-->
<!--      </van-popup>-->
    </div>
</template>

<script>
  import {getInvitationPosters} from '@/api/fetch'

// import Vue from 'vue'
// import VueClipboard from 'vue-clipboard2'
// import { Popup } from 'vant'
// import { Toast } from 'vant'

// Vue.use(Toast)
// Vue.use(VueClipboard)
// Vue.use(Popup)

export default {
  name: 'DetailOfExtension',
  data () {
    return {
      // show: false,
      // sysAppIds: 'xxxxxxxxxxxsx',
      index:"",
      haibao:"",
      yinli:""
    }
  },
  methods: {
    // showdig () {
    //   this.show = true
    // },
    // onCopy (e) {
    //   Toast.success('复制成功')
    // },
    // // 复制失败
    // onError (e) {
    //   alert('失败')
    // },
    changeelement(){
      console.log(this.index)
      this.getInvitationPosters(this.index)
    },
    // changestyle(){
    //   console.log(this.index)
    //   this.getInvitationPosters(this.index)
    // },

    async getInvitationPosters (theindex) {
      const res = await getInvitationPosters({
        vid:this.$route.query.vid,
        index:theindex
      })
      console.log(res)
     if(res.errcode == 0){
       this.haibao=res.data.data
       this.yinli=res.data.profit
       this.index=res.data.index
     }
    }
  },
  activated() {
    let suiji = Math.floor(Math.random()*3 + 1)
    console.log(suiji)
    this.getInvitationPosters(suiji)
  }
}
</script>

<style lang="less" scoped>
  @import '~less/variable.less';
  @import '~less/mixins.less';
.detext {
  .h100();

  .detext_tip {
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;

    strong {
      color: #187a72;
    }
  }

  .detext_pic {
    width: 80%;
    margin-left: 10%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 100%;
    }

    p {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: black;
      color: white;
      opacity: 0.5;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 17px;
    }
  }

  .detext_btns {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;

    li {
      width: 200px;
      height: 40px;
      border-radius: 7px;
      color: white;
      font-size: 16px;
      background: #187a72;
      line-height: 40px;
      text-align: center;
    }
  }

  /*.detext_dig{*/
  /*  width: 330px;*/
  /*  height: 290px;*/
  /*  overflow: hidden;*/
  /*  .detext_dig_title{*/
  /*    width: 100%;*/
  /*    margin-top: 20px;*/
  /*    text-align: center;*/
  /*  }*/
  /*  .detext_dig_way{*/
  /*    width: 100%;*/
  /*    margin-top: 20px;*/
  /*    display: flex;*/
  /*    flex-direction: row;*/
  /*    .detext_dig_way_labe{*/
  /*      width: 80px;*/
  /*      margin-left: 10px;*/
  /*    }*/
  /*    span{*/
  /*      p:first-child{*/
  /*        font-size: 13px;*/
  /*      }*/
  /*      p:last-child{*/
  /*        margin-top: 10px;*/
  /*        line-height: 18px;*/
  /*        font-size: 13px;*/
  /*        color: #999999;*/
  /*      }*/
  /*    }*/
  /*  }*/
  /*  .detext_dig_tip{*/
  /*    width: 100%;*/
  /*    text-align: center;*/
  /*    margin-top: 20px;*/
  /*    span{*/
  /*      display: block;*/
  /*      margin: 0 auto;*/
  /*      width: 160px;*/
  /*      border-radius: 20px;*/
  /*      line-height: 40px;*/
  /*      height: 40px;*/
  /*      background: #187a72;*/
  /*      color: white;*/
  /*    }*/
  /*    p{*/
  /*      font-size: 12px;*/
  /*      margin-top: 10px;*/
  /*      color: #999999;*/
  /*    }*/
  /*  }*/
  /*}*/
  /*}*/
  /*  .copylink{*/
  /*    color: #187a72;*/
  /*    border: 1px solid #187a72;*/
  /*    padding: 5px;*/
  /*    border-radius: 12px;*/
  /*    margin-left: 3px;*/
  /*  }*/
  /*  .linkbecopy{*/
  /*    width: 257px;*/
  /*    overflow:hidden;*/
  /*    text-overflow:ellipsis;*/
  /*    white-space:nowrap*/
  /*  }*/
  /*  .detext_dig_backcenter{*/
  /*    margin: 0 auto;*/
  /*  }*/
}
</style>
